<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    v-loading="loading"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('1200px')"
    :visible="visible"
    :title="$t('MODIFY_SEGMENT')"
    @open="open"
    @close="close"
  >
    <!-- 网段基本信息 -->
    <div class="flex flex-wrap">
      <div class="w-50">
        <span class="title-label">{{ $t('SEGMENT_NAME') }}:</span>
        {{ formData.segmentName }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('CABLE_NAME') }}:</span>
        {{ formData.cable ? formData.cable.cableName : '--' }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('A_END_STATION_NAME') }}:</span>
        {{ getRegionName(formData.startStationId) }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('Z_END_STATION_NAME') }}:</span>
        {{ getRegionName(formData.endStationId) }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('ANODE') }}:</span>
        {{ formData.startNode.nodeName }}
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('ZNODE') }}:</span>
        {{ formData.endNode.nodeName }}
      </div>
    </div>
    <div class="text-warning pt-10 pb-20">
      {{ $t('ABNORMAL_STATUS_CAUSE') }}：
      {{ dictMap.ABNORMAL_SEGMENT_STATUS[formData.abnormalType] }}
    </div>
    <el-table ref="tableBox" :data="tableData" height="100%" class="status-row" border>
      <el-table-column
        type="index"
        :label="$t('SEQUENCE')"
        fixed="left"
        :width="resetSize(60)"
        align="center"
      />
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column :label="$t('CHANNEL_STATUS')" width="160">
        <template v-slot="scope">
          <el-select
            v-model="scope.row.status"
            size="mini"
            :disabled="scope.row.bizStatus === 'OPENING'"
            @change="statusChange(scope.row)"
          >
            <el-option
              v-for="item in scope.row.statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="scope.row.disabledStatus === item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <!-- A端节点信息 -->
      <el-table-column :label="formData.startNode.nodeName">
        <el-table-column
          v-if="
            formData.startNode.nodeCategory !== 'LIGHT_SPLIT' &&
              formData.startNodeCategory !== 'TRANSPORT'
          "
          :label="$t('A_EEND_PORT')"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            {{ getConnPortName(scope.row.startPort.connPortId, 'a') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('Z_EEND_PORT')" show-overflow-tooltip>
          <template v-slot="scope">
            <span class="font-mini" :class="'color-' + scope.row.startPort.status.toLowerCase()">
              ({{ dictMap.PORT_STATUS[scope.row.startPort.status] }})
            </span>
            {{ $utils.handleServiceI18n(scope.row.startPort.bizName) }}
          </template>
        </el-table-column>
      </el-table-column>
      <!-- 光缆信息 -->
      <el-table-column v-if="formData.cableId" :label="formData.cable.cableName">
        <el-table-column :label="$t('FIBER_CORE')" show-overflow-tooltip>
          <template v-slot="scope">
            <span class="font-mini" :class="'color-' + scope.row.fiber.status.toLowerCase()">
              ({{ dictMap.PORT_STATUS[scope.row.fiber.status] }})
            </span>
            {{ scope.row.fiber.fiberName }}
          </template>
        </el-table-column>
      </el-table-column>
      <!-- Z端节点信息 -->
      <el-table-column :label="formData.endNode.nodeName">
        <el-table-column :label="$t('A_EEND_PORT')" show-overflow-tooltip>
          <template v-slot="scope">
            <span class="font-mini" :class="'color-' + scope.row.endPort.status.toLowerCase()">
              ({{ dictMap.PORT_STATUS[scope.row.endPort.status] }})
            </span>
            {{ $utils.handleServiceI18n(scope.row.endPort.bizName) }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="
            formData.endNodeCategory !== 'LIGHT_SPLIT' && formData.endNodeCategory !== 'TRANSPORT'
          "
          :label="$t('Z_EEND_PORT')"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            {{ getConnPortName(scope.row.endPort.connPortId, 'z') }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('ASSOCIATED_SERVICE_NAME')" width="110" prop="bizName" />
      <el-table-column :label="$t('ASSOCIATED_SERVICE_STATUS')" width="110">
        <template v-slot="scope">
          {{ dictMap.BIZ_STATUS[scope.row.bizStatus] }}
        </template>
      </el-table-column>
    </el-table>
    <template v-slot:footer>
      <el-button @click="close"> {{ $t('CANCEL') }}</el-button>
      <el-button type="primary" @click="$debounce(save)">{{ $t('SAVE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import routeSegmentApi from '@/api/oen/DevAdjust'
  import nodeApi from '@/api/oen/NodeApi'
  import clusterApi from '@/api/afs/ClusterApi'
  import { deepClone } from '@/utils/common'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        loading: false,
        step: 1,
        formData: {
          startNode: {},
          endNode: {}
        },
        tableData: [],
        oldChannelList: [],
        oldFormData: null,
        aAllPortList: [],
        zAllPortList: []
      }
    },
    computed: {
      ...mapGetters(['dictList', 'dictMap', 'baseRegionList'])
    },
    methods: {
      open() {
        this.oldChannelList = []
        this.oldFormData = null
        this.formData = deepClone(this.rowData)
        this.getPortList(this.formData.startNodeId, 'a')
        this.getPortList(this.formData.endNodeId, 'z')
        this.tableData = this.formData.debugSegmentChannelList.map(i => {
          const statusOptions = this.dictList.CHANNEL_STATUS.filter(
            j => j.value === i.status || j.value === 'IDLE' || j.value === 'DAMAGE'
          )
          return {
            ...i,
            disabledStatus: i.status === 'IDLE' || i.status === 'DAMAGE' ? false : i.status,
            statusOptions: statusOptions
          }
        })
      },
      // 获取端口列表
      getPortList(nodeId, type) {
        this[`${type}AllPortList`] = []
        // console.log('this.formData', this.formData)
        // AOCC和集群设备端口单独获取
        const nodeSide = type === 'a' ? 'startNode' : 'endNode'
        if (
          this.formData[nodeSide].nodeType === 'CLUSTER'
        ) {
          clusterApi.extPortList({ clusterId: nodeId }).then(res => {
            this[`${type}AllPortList`] = res
          })
        } else {
          nodeApi
            .portList({
              nodeId: nodeId,
              status: null
            })
            .then(res => {
              this[`${type}AllPortList`] = res
            })
        }
      },
      // 获取对端端口名称
      getConnPortName(portId, side) {
        const connPortData = this[side + 'AllPortList'].find(i => i.portId === portId)
        return connPortData ? this.$utils.handleServiceI18n(connPortData.bizName) : '--'
      },
      statusChange(row) {
        if (row.status === 'IDLE') {
          row.startPort.status = 'CONN'
          row.endPort.status = 'CONN'
          row.fiberId && (row.fiber.status = 'CONN')
        }
        if (row.status === 'DAMAGE') {
          row.startPort.status = 'DAMAGE'
          row.endPort.status = 'DAMAGE'
          row.fiberId && (row.fiber.status = 'DAMAGE')
        }
      },
      //       {
      // "segmentChannelId": "rac",

      // "status": "IDLE"

      // }
      save() {
        const requestData = []
        this.tableData.forEach((i, index) => {
          const oldData = this.rowData.debugSegmentChannelList[index]
          if (
            oldData.status !== i.status ||
            oldData.startPort.status !== i.startPort.status ||
            oldData.endPort.status !== i.endPort.status ||
            (i.fiberId && oldData.fiber.status !== i.fiber.status)
          ) {
            requestData.push({
              segmentChannelId: i.channelId,
              status: i.status
            })
          }
        })
        routeSegmentApi.updateChannelStatus(
          requestData,
          { segmentName: this.formData.segmentName } // 操作日志需要传此参数
        ).then(res => {
          this.close(true)
          this.$message.success(this.$t('MODIFY_SUCCESS'))
        })
      },
      // 获取区域/站点/机房
      getRegionName(stationId) {
        const stationData = this.baseRegionList.find(i => i.regionId === stationId)
        return stationData ? stationData.regionName : ''
      },
      close(load) {
        this.$emit('close', load)
        this.formData = { ...this.$options.data().formData }
      }
    }
  }
</script>

<style scoped lang="scss">
  .segment-dialog {
    ::v-deep .el-dialog__body {
      display: flex;
      flex-direction: column;
    }
  }
</style>
